<template>
  <view>
    <view>
      <tn-form :model="form" ref="form" :labelWidth="550" :errorType="['message', 'toast']">
        <view class="card tn-padding-sm tn-margin-sm">
          <view class="title">
            反应及时
          </view>
          <tn-form-item label="通讯畅通，回复及时。" prop="fyjsLlct">
            <tn-switch v-model="form.fyjsLlct" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
          <tn-form-item label="车辆到达现场快速、及时。" prop="fyjsCcxs">
            <tn-switch v-model="form.fyjsCcxs" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
          <tn-form-item label="车辆、机械、工具、装备按要求全部到位，无缺失。" prop="fyjsZbqq">
            <tn-switch v-model="form.fyjsZbqq" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
          <tn-form-item label="人手配备依据现场需求确保充足，按规定穿戴好防护用品。" prop="fysjRscz">
            <tn-switch v-model="form.fysjRscz" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
        </view>

        <view class="card tn-padding-sm tn-margin-sm">
          <view class="title">
            安全管理
          </view>
          <tn-form-item label="驾驶车辆遵章守纪，救援现场停车规范。" prop="aqglGfxc">
            <tn-switch v-model="form.aqglGfxc" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
          <tn-form-item label="现场作业人员在安全区域内作业，不盲动，不得横穿高速公路。" prop="aqglRyzw">
            <tn-switch v-model="form.aqglRyzw" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
          <tn-form-item label="作业指挥人员在现场指挥要规范、准确。" prop="aqglGfzh">
            <tn-switch v-model="form.aqglGfzh" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
          <tn-form-item label="现场作业人员必须执行各项安全操作规程。" prop="aqglAqzy">
            <tn-switch v-model="form.aqglAqzy" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
        </view>

        <view class="card tn-padding-sm tn-margin-sm">
          <view class="title">
            服从管理
          </view>
          <tn-form-item label="合作单位负责人对施救所需人力、物力组织协调得当。" prop="fcglZzdd">
            <tn-switch v-model="form.fcglZzdd" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
          <tn-form-item label="合作单位负责人对现场作业人员和相关车辆、设备管理有力。" prop="fcglGlyl">
            <tn-switch v-model="form.fcglGlyl" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
          <tn-form-item label="合作单位所有人员服从现场安全员的调动、管理。" prop="fcglFcdd">
            <tn-switch v-model="form.fcglFcdd" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
          <tn-form-item label="合作单位所有人员遵守高速公路相关管理规定。" prop="fcglZsgz">
            <tn-switch v-model="form.fcglZsgz" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
        </view>
        <view class="card tn-padding-sm tn-margin-sm">
          <view class="title">
            作业质量
          </view>
          <tn-form-item label="现场作业人员技术娴熟，不手忙脚乱。" prop="zyzlJssl">
            <tn-switch v-model="form.zyzlJssl" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
          <tn-form-item label="作业现场井井有条，秩序良好，无混乱场面。" prop="zyzlZyyx">
            <tn-switch v-model="form.zyzlZyyx" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
          <tn-form-item label="现场作业无反复、速度快，起吊安全、到位，货物满装满运、稳拿轻放。" prop="zuzlZygx">
            <tn-switch v-model="form.zuzlZygx" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
          <tn-form-item label="货物吊装、驳载后及时送到指定地点，无缺失。" prop="zyzlShdw">
            <tn-switch v-model="form.zyzlShdw" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
        </view>
        <view class="card tn-padding-sm tn-margin-sm">
          <view class="title">
            其他情况
          </view>
          <tn-form-item label="现场作业时使用文明用语，礼貌待人。" prop="qtqkWmfw">
            <tn-switch v-model="form.qtqkWmfw" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
          <tn-form-item label="严格按照相关规定收取费用，不乱收费、不多收费。" prop="qtqkAzsf">
            <tn-switch v-model="form.qtqkAzsf" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
          <tn-form-item label="吊装、驳载车辆和货物时，不得因人为操作失误导致新的损失。" prop="qtqkAxcc">
            <tn-switch v-model="form.qtqkAxcc" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
          <tn-form-item label="必须使用国家发行的正规发票，开具规范、准确，送交及时。" prop="qtqkKpgf">
            <tn-switch v-model="form.qtqkKpgf" activeColor="#28B93D" leftIcon="success" rightIcon="close"
                       inactiveColor="#E83A30"></tn-switch>
          </tn-form-item>
        </view>
        <view class="card tn-padding-sm tn-margin-sm">

          <tn-form-item label="合作单位负责人：" :labelWidth="160" prop="chargePerson">
            <image class="signImg" @click="jupmSign('chargePerson')" :src="form.chargePerson" mode=""></image>
          </tn-form-item>

          <tn-form-item label="监管人：" :labelWidth="160" prop="supervisionPerson">
            <image class="signImg" @click="jupmSign('supervisionPerson')" :src="form.supervisionPerson" mode=""></image>
          </tn-form-item>



          <tn-form-item label="备注：" :labelWidth="160" prop="qtqkBz">
            <tn-input type="textarea" v-model="form.qtqkBz"/>
          </tn-form-item>

		  <tn-form-item label="时间："  :labelWidth="160" prop="createTime1">
		    <uni-datetime-picker :clearIcon="false" :border="false" placeholder="请选择时间"
		  					   v-model="form.createTime1" />
		  </tn-form-item>
        </view>

        <view class="tn-flex tn-flex-row-center tn-padding-xl">
          <tn-button @click="submit" backgroundColor="tn-bg-blue" style="width: 80%" fontColor="tn-color-white">保存
          </tn-button>
        </view>
      </tn-form>
    </view>
    <tn-modal v-model="erweima" :custom="true">
      <view class="custom-modal-content tn-flex tn-flex-direction-column tn-flex-col-center">
        <p style="margin-bottom: 8px;">车辆救援服务监管表</p>
        <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px;"></canvas>
        <tn-button @click="downloadPDFFn" backgroundColor="tn-bg-blue" style="width: 80%;margin-top: 16px;" fontColor="tn-color-white">
          下载PDF
        </tn-button>
      </view>
    </tn-modal>
  </view>
</template>

<script>
import {getJyServiceSupervise, addJyServiceSupervise} from '@/api/jyServiceSupervise';
import UQRCode from '@/node_modules/uqrcodejs/uqrcode.js';
import config from '@/config';
import dayjs from 'dayjs';
import {downPdf, erweimaUrl} from "@/api/exam";
import {saveNextStep} from "@/pages/rescue/add/funtion";
export default {
  data() {
    return {
			dragAddress: '',
      erweima: false,
      showSign: false,
      form: {
		createTime1:'',
        fyjsLlct: 1,
        fyjsCcxs: 1,
        fyjsZbqq: 1,
        fysjRscz: 1,
        aqglGfxc: 1,
        aqglRyzw: 1,
        aqglGfzh: 1,
        aqglAqzy: 1,
        fcglZzdd: 1,
        fcglGlyl: 1,
        fcglFcdd: 1,
        fcglZsgz: 1,
        zyzlJssl: 1,
        zyzlZyyx: 1,
        zuzlZygx: 1,
        zyzlShdw: 1,
        qtqkWmfw: 1,
        qtqkAzsf: 1,
        qtqkAxcc: 1,
        qtqkKpgf: 1,
        qtqkBz: '',
        supervisionPerson: '',
        chargePerson: ''
      },
      rules: {
        // jiuyuangongsi: [
        // 	{
        // 		required: true,
        // 		message: '请输入救援公司',
        // 		trigger: ['change']
        // 	}
        // ],
      }
    };
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.form.setRules(this.rules);
    uni.getStorage({
      key: 'TIANBAOID',
      success: (res) => {
        console.log(res.data);
        if (res.data) {
          this.getList(res.data);
          this.form.jyBaseId = res.data;
        }
      }
    });
  },
  async onNavigationBarButtonTap(e) {
    // 08.12 解决卷宗修改车牌，数据不同步问题
    this.submit('pdf');
  },
  methods: {
    downloadPDFFn() {
			// 创建一个隐藏的 <a> 元素用于下载
			const link = document.createElement('a');
			link.href = downPdf({
        baseId: this.form.jyBaseId,
        typeName: "fwjg",
        zyqdId: undefined
      });
			link.download = '安全记录.pdf'; // 设置下载的文件名
			link.style.display = 'none';
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
			uni.showToast({
				title: '下载成功',
				icon: 'success'
			});
		},
    creatImg() {
      // 获取uQRCode实例
      var qr = new UQRCode();
      // 设置二维码内容
			qr.data =erweimaUrl({
        baseId: this.form.jyBaseId,
        typeName: "fwjg",
        zyqdId: undefined
      })
      // 设置二维码大小，必须与canvas设置的宽高一致
      qr.size = 200;
      // 调用制作二维码方法
      qr.make();
      // 获取canvas上下文
      var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
      // 设置uQRCode实例的canvas上下文
      qr.canvasContext = canvasContext;
      // 调用绘制方法将二维码图案绘制到canvas上
      qr.drawCanvas();
    },
    jupmSign(name) {
      uni.navigateTo({
        url: '/pages/signBoard/signBoard?name=' + name,
        events: {
          // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
          acceptDataFromOpenedPage: (data) => {
            this.form[data.name] = data.data;
          }
        }
      });
    },
    getList(id) {
      getJyServiceSupervise(id).then((res) => {
        if (res.data) {
          this.form = res.data;
					this.dragAddress = true;
        }else{
          this.form.createTime1 =  dayjs().format('YYYY-MM-DD HH:mm:ss')
        }
      });
    },
    submit(type) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          addJyServiceSupervise(this.form).then((res) => {
			      saveNextStep(type, res, this)
          });
          console.log('验证通过');
        } else {
          console.log('验证失败');
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  background-color: #fff;
  box-shadow: 0px 4px 20px 0px rgba(0, 3, 72, 0.1);
  border-radius: 8px;
}

.title {
  font-size: 34rpx;
  border-bottom: 1px solid #efefef;
  padding-bottom: 0.5em;
  font-weight: bold;
  color: #0a47c4;
}
::v-deep{
		.tn-form-item--left__content__label{
			font-weight: 700;
		}
	}
</style>
